<template>
  <view class="">
    <view class="form">
      <view class="input">
        <u-search
          placeholder="请输入查询内容"
          hape="round"
          @change="resetSearch"
          v-model="keyword"
          :clearabled="true"
          :showAction="false"
        ></u-search>
      </view>
    </view>
    <view class="pageLayout list_box">
      <view class="list">
        <view
          class="item"
          v-for="(item, index) in listData"
          :key="index"
          @click="gotoDetail(item)"
        >
          <view class="top_box">
            <view class="left">
              <view class="name"> 客户名称：{{ item.customerName }} </view>
              <view class="text">
                用车日期：{{ formatTimestamp(item.useDate, "onlyDate") }}
              </view>
              <view class="text">
                 填写状态： <span :class="item.isFillIn ? 'success' : 'error'">{{ item.isFillIn ? "已填写" : "未填写" }}</span>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import store from "../../store/index";
import { queryHospitalityResultPageListApi } from "@/api/withCustom/index";

export default {
  components: {},
  data() {
    return {
      form: {
        keyword: "",
        pageIndex: 1,
        pageSize: 10,
      },
      tabsList: [
        {
          name: "未交换",
          val: "WaitBeConfirm",
        },
        {
          name: "已交换",
          val: "Exchanged",
        },
      ],
      totalPages: 0, //总页数
      listData: [],
    };
  },
  computed: {
    hasLogin() {
      return this.$store.state.token && this.$store.state.token.length > 0;
    },
  },
  methods: {
    /**
     * 跳转详情页
     */
    gotoDetail(item) {
      uni.navigateTo({
        url:
          "/pages/withCustom/detail?id=" +
          item.resultID +
          "&isFillIn=" +
          item.isFillIn,
      });
    },
    /**
     * 获取交换场次列表
     */
    getList() {
      queryHospitalityResultPageListApi(this.form)
        .then((res) => {
          this.listData = [...this.listData, ...res.data.items];
          console.log(this.listData, "listData");
          this.totalPages = res.data.totalPages;
        })
        .catch((e) => {
          this.$refs.toastRef.showToast({
            msg: e.data.detail,
            duration: 1000,
            position: "center",
          });
        });
    },
    /**
     * 重置分页
     */
    resetSearch() {
      this.form.pageIndex = 1;
      this.listData = [];
      this.getList();
    },

    /**
     * 确认交换
     */
    Confirm(item) {
      console.log(item);
      console.log(item.venueExchangeID);
      // return
      let data = {
        venueExchangeID: item.venueExchangeID,
      };
      //   ConfirmVenueExchangeApi(data).then((res) => {
      //     this.$refs.uToast.show({
      //       message: "交换成功",
      //       type: "success",
      //       duration: 5000,
      //     });
      //     this.resetSearch();
      //   });
    },
  },
  onShow() {
    this.resetSearch();
  },
  /**
   * 上拉加载更多
   */
  onReachBottom() {
    console.log(123);

    if (this.form.pageIndex < this.totalPages) {
      this.form.pageIndex++;
      this.getList();
    }
  },
};
</script>
<style>
page {
  background-color: #f5f7fb;
}
</style>

<style lang="scss" scoped>
.form {
  background-color: #ffffff;
  padding: 20rpx;
}

.list_box {
  margin-top: 10rpx;
  padding: 20rpx;

  .ico {
    width: 50rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .list {
    .item {
      background-color: #ffffff;
      margin-bottom: 20rpx;
      padding: 40rpx;
      border-bottom: 2rpx solid #e5e5e5;
      // box-shadow: #b9b9b9 0rpx 5rpx 10rpx;
      border-radius: 8rpx;

      .top_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .name {
          font-size: 24rpx;
          color: #333333;
          margin-bottom: 10rpx;
          font-weight: bold;
        }
        .text {
          font-size: 24rpx;
          color: #333333;
          margin-bottom: 10rpx;
          .success {
            color: #52C41A;
          }
          .error {
            color: #a22c26;
          }
        }
        .right {
          .isFill {
            color: #009688;
          }
          .notFill {
            color: #ff9800;
          }
        }
      }
      .bottom_box {
        display: flex;
        justify-content: flex-end;
        margin-top: 16rpx;
      }
    }
  }
}
</style>
